<template>
    <h1>这是vuex页面</h1>
    <button @click="updateVuexCount">修改count</button>
    <button @click="updateVuexCountByObj">修改count-对象方式</button>
    <p>count: {{count}} </p>
    <p>tenTimes: {{ tenTimes }}</p>
    <h1>命名空间</h1>   
    <p>无命名空间</p>
    <p>访问 模块A中的state数据:{{ $store.state.a.countA }}</p>
    <p>访问 模块A中的getter数据:{{ $store.getters.countAA }}</p>
    <p>有命名空间</p>
    <p>访问 模块B中的state数据:{{ $store.state.b.countB}}</p>
    <p>访问 模块B中的getter数据:{{ $store.getters['b/countBB'] }}</p>

    <h1>MapXXX方法</h1>
    <h2>全局</h2>
    <p>state</p>
    <p>count:{{ count }}</p>
    <p>getters</p>
    <p>tenTimes:{{ tenTimes }}</p>
    <p>countAA:{{ countAA }}</p>
    <p>mutations</p>    
    <button @click="emitIncrementMut">触发emitIncrementMut</button>
    <button @click="increaseA">触发increaseA</button>
    <p>actions</p>
    <button @click="emitIncrementAct">触发emitIncrementAct</button>
    <button @click="asyncIncreaseA">触发asyncIncreaseA</button>

    <h2>局部</h2>
    <p>moduleB state</p>
    <p>countB: {{ countB }}</p>

    <p>moduleB mutations</p>
    <button @click="emitIncreaseB">触发increaseB</button>

    <h2>重命名</h2>
    <p>countAlias {{ countAlias }}</p>
</template>

<script>
  import { mapState,mapGetters,mapMutations,mapActions } from "vuex"
export default{
    computed:{
        // count(){
        //     return this.$store.state.count

        // },
        // tenTimes(){
        //     return this.$store.getters.tenTimes
        // },
        // updateVuexCount(){
        //     this.$store.commit('incrementMut',{count:888})
        // },
        // updateVuexCountByObj(){
        //     this.$store.commit({
        //         type:'incrementMut',
        //         count:800
        //     })
        // }
        //映射全局state
            ...mapState(['count']),
            //映射全局getter
            ...mapGetters(['tenTimes','countAA']),

            //映射模块
            ...mapState('b',['countB']),

            //重命名
            ...mapState({
            countAlias: 'count '
            })
          
    },
    methods:{
        //映射全局Mutations
        ...mapMutations(['incrementMut','increaseA']),
        //映射全局actions
        ...mapActions(['incrementAct','asyncIncreaseA']),
        emitIncrementMut(){
            this.incrementMut({count:50})
        },
        emitIncrementAct(){
            this.incrementAct({count:500})
        },

        //映射局部
        ...mapMutations('b',['increaseB']),
        emitIncreaseB(){
            this.increaseB()
        },
    }
}
</script>
